<template>
  <div class="hy-form">
    <el-form :label-width="props.labelWidth">
      <el-row :gutter="props.gutter">
        <template v-for="item in props.formItems" :key="item.label">
          <el-col v-bind="props.reactiveCol">
            <el-form-item :label="item.label" v-if="!item.isHidden">
              <template v-if="item.type === 'input'">
                <el-input
                  :placeholder="item.placeholder"
                  :show-password="item.other && item.other.password"
                  v-model="formData[`${item.field}`]"
                />
              </template>
              <template v-else-if="item.type === 'select'">
                <el-select
                  :placeholder="item.placeholder"
                  style="width: 100%"
                  v-model="formData[item.field]"
                >
                  <el-option
                    :label="option.label"
                    :value="option.value"
                    v-for="option in item.other.options"
                    :key="option.label"
                  ></el-option>
                </el-select>
              </template>
              <template v-else-if="item.type === 'datepicker'">
                <el-date-picker
                  :placeholder="item.placeholder"
                  type="daterange"
                  :start-placeholder="item.other.startPlaceholder"
                  :end-placeholder="item.other.endPlaceholder"
                  v-model="formData[item.field]"
                />
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <div class="footer"><slot name="btns"></slot></div>
  </div>
</template>

<script lang="ts" setup>
import { PropType, ref, watch, computed } from 'vue';
import type { IFormItemType } from './types';
const props = defineProps({
  formItems: {
    type: Array as PropType<IFormItemType[]>,
    default: () => []
  },
  reactiveCol: {
    type: Object,
    default: () => ({
      xs: 24,
      sm: 24,
      md: 12,
      lg: 8,
      xl: 8
    })
  },
  labelWidth: {
    type: String,
    default: '100px'
  },
  gutter: {
    type: Number,
    defalut: 20
  },
  modelValue: {
    type: Object,
    required: true
  }
});
const emits = defineEmits(['update:modelValue']);
// const formData = ref({ ...props.modelValue });
const formItems = computed(() => props.formItems);
const formData = computed(() => props.modelValue);
watch(
  formData,
  (newVal) => {
    console.log(newVal, 'HYform');
    emits('update:modelValue', newVal);
  },
  {
    deep: true
  }
);
watch(
  () => formItems,
  (newVal) => {
    console.log(newVal, 'ITEM');
  },
  {
    deep: true
  }
);
</script>

<style scoped lang="less">
.hy-form {
  padding: 20px 30px;
  .footer {
    text-align: right;
  }
}
</style>
